<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>网页的布局</title>
        <style>
            header,
            main,
            footer {
                width: 1000px;
                margin: 0 auto;
            }

            nav,
            article,
            aside {
                float: left;
                height: 100%;
            }

            /*
			        设置头部
			      */
            header {
                height: 200px;
                background-color: silver;
            }

            /*
			          设置身体
			      */
            main {
                height: 500px;
                background-color: #bfa;
            }

            /*
                设置左侧侧边栏
            */
            nav {
                width: 200px;
                background-color: yellow;
            }

            /*设置中间的内容*/
            article {
                width: 580px;
                background-color: orange;
                margin: 0 10px;
            }

            /*
                设置右侧的内容
            */
            aside {
                width: 200px;
                background-color: pink;
            }

            /*
			设置底部
			 */
            footer {
                height: 200px;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <!--
			创建头部
		-->
        <header></header>

        <!--
			创建网页的主体
		-->
        <main>
            <!--
				这里只是简单的区分,真正开发的时候只使用div标签一点问题都没有
			-->
            <!--
				左侧的导航
			-->
            <nav></nav>

            <!--
				中间的内容
			-->
            <article></article>

            <!--
				有边的边栏
			-->
            <aside></aside>
        </main>

        <!--
			网页的底部
		-->
        <footer></footer>
    </body>
</html>
